<script setup="">
import {defineEmits, onMounted, ref} from "vue"
import {useRouter} from "vue-router";
import {timeAgo} from "@/util/time.js";
import NewOrEditProduct from "@/components/product/NewOrEditProduct.vue";
import {adminDeleteProduct, adminDeleteTweet} from "@/request/mid_interface.js";
import {ElMessage, ElMessageBox} from "element-plus";

const emit = defineEmits([]);
const router = useRouter();

const props = defineProps({
  param: {
    type: Object,
    required: false
  }
})

const dialogVisible = ref(false)

function getRelativeTime(res) {
  return timeAgo(res)
}

async function deleteProduct() {
  ElMessageBox.confirm(
      '是否要删除此商品？该操作不可撤销',
      '请确认',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        const product_id = props.param.product_id
        const res = await adminDeleteProduct({
          product_id
        })
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        refresh()
      })
      .catch(() => {
          }
      )

}

function refresh() {
  dialogVisible.value = false
  emit("refresh")
}

onMounted(() => {

})
</script>

<template>
  <div class="w-full bg-white px-5 py-3 rounded-xl" style="">
    <el-dialog v-model="dialogVisible" width="800">
      <NewOrEditProduct @close="dialogVisible=false" @refresh="refresh" :param="param"></NewOrEditProduct>
    </el-dialog>
    <div class="w-full flex">
      <img class="w-28 h-28 object-cover rounded" :src="param.product_image_url" alt="">
      <div class="flex-1 flex flex-col ml-3 py-1">
        <div class="flex-1 break-all cursor-pointer select-none" style="font-size: 15.5px">{{ param.title }}</div>
        <div class="flex justify-between items-center">
          <div class="text-gray-400 text-sm">{{ getRelativeTime(param.create_time * 1000) }} 阅读量
            {{ param.read_count }}
          </div>
          <div class="flex items-center">
            <img @click="deleteProduct" class="cursor-pointer select-none ml-2.5 w-6"
                 src="@/assets/img/tweet_card/delete.svg" alt="">
            <img @click="dialogVisible=true" class="cursor-pointer select-none ml-2.5 w-6"
                 src="@/assets/img/tweet_card/edit.svg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>
